<template>
<div class="register_bg">
    <div class="register_con">
        <div class="l_con fl">
            <a class="reg_logo fr"><img src="../assets/images/logo02.png"></a>
            <div class="reg_slogan">足不出户  ·  新鲜每一天</div>
            <div class="reg_banner"></div>
        </div>

        <div class="r_con clearfix">
            <div class="r_con_title clearfix">
                <h1>用户注册</h1>
                <router-link to="/login">登录</router-link>
            </div>
            <div class="registe_form">
                <form>
                    <ul class="registe_form_ul clearfix">
                        <li>
                            <label>用户名:</label>
                            <input type="text/name" v-model="username" name="user_account" id="user_account" placeholder="">
                            <span class="error_tip" v-show='illegalUserName'>请输入5-20个字符的用户名</span>
                        </li>
                        <li>
                            <label>密码:</label>
                            <input type="password"  v-model="password" name="password" id="password" placeholder="">
                            <span class="error_tip" v-show='illegalPassword'>密码最少8位，最长20位</span>
                        </li>
                        <li>
                            <label>确认密码:</label>
                            <input type="password" v-model="confirmPasswrod" name="confirmPassword" id="confirmPassword" placeholder="">
                            <span class="error_tip" v-show='illegalConfirmPasswrod' >确认密码与密码不一致</span>
                        </li>
                        <li>
                            <label>邮箱:</label>
                            <input type="email" v-model="email" name="email" id="email" placeholder="">
                            
                            <span class="error_tip" v-show='illegalEmail'>你输入的邮箱格式不正确</span>
                        </li>
                        <li class="Allow_checkbox">
                            <input type="checkbox" name="allow" id="allow" checked="checked" v-model="checkbBox">
                            <label>同意“天天生鲜用户使用协议”</label>
                            <span class="error_tip2">请勾选同意</span>
                        </li>
                        <li class="reg_sub">
                            <input type="button" name="" value="注册" @click="doSubmit" v-loading.fullscreen.lock="fullscreenLoading">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    <Footer></Footer>
</div>
</template>

<script>

export default {
    name: 'Register',
    component:{
        
    },
    data:function(){
        return {
            'username':'',
            'illegalUserName':false,
            'checkoutUserName':false,
            'password':'',
            'illegalPassword':false,
            'checkoutPassword':false,
            'confirmPasswrod':'',
            'illegalConfirmPasswrod':false,
            'checkoutConfirmPasswrod':false,
            'email':'',
            'illegalEmail':false,            
            'checkoutEmail':false,
            'checkbBox':true,
            'fullscreenLoading': false,
            'errorMsg':'我来看看'
        }
    },
    watch:{
        username:function(newVal){
            let res = 5 <= newVal.length  && newVal.length <= 20
            this.illegalUserName =  !res;
            this.checkoutUserName = res;
        },
        password:function(newVal){
            let res = 8 <= newVal.length  && newVal.length <= 20;
            this.illegalPassword =  !res;
            this.checkoutPassword = res;
        },
        confirmPasswrod:function(newVal){
            let res = newVal.length > 0 && this.password === newVal
            this.illegalConfirmPasswrod = !res;
            this.checkoutConfirmPasswrod = res;
        },
        email:function(newVal){
            
            let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            let res = reg.test(newVal)
            this.illegalEmail = !res;
            this.checkoutEmail = res;
        }
    },
    methods:{
        doSubmit:function(){
            console.log("doSubmit");
            let res = (this.checkoutUserName && this.checkoutPassword && this.checkoutConfirmPasswrod && this.checkoutEmail && this.checkbBox)
             console.log(this.checkoutUserName , this.checkoutPassword , this.checkoutConfirmPasswrod , this.checkoutEmail, this.checkbBox);
            if (res){
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
                    
                }, 2000);
            }else{
                this.$message.error('请填写正确信息！');
            }
        }
    }
}
</script>

<style>
.register_bg{font-family:'Microsoft Yahei';font-size:12px;color:#666;height:100%}
.register_con{
	width:700px;
	height:560px;
	margin:50px auto 0;
	background:url(../assets/images/interval_line.png) 300px top no-repeat;
}
.l_con{width:300px;float: left;}
.reg_logo{width: 200px;height: 76px;margin-right: 30px;float: right;}
.reg_slogan{width: 300px;height:30;float: right;font-size: 24px; text-align: right;color:#69a81e;margin:20px 30px 0 0;}
.reg_banner{width:251px;height:329px;background:url(../assets/images/register_banner.png) no-repeat;float:right; margin:20px 10px 0 0;opacity:0.5}
.r_con{width:400px;float: right;margin: 0px;}
.r_con_title{width:360px;height:50px;float:left;margin-left:30px;border-bottom:1px solid #e0e0e0}
.r_con_title h1{height:50px; line-height: 50px;float:left;font-size:24px;color:#a8a8a8;font-weight:bold;margin-top: 0px;}
.r_con_title a{float:right;height:20px;line-height:20px;font-size:16px;color:#5fb42a;padding-right:20px;background:url(../assets/images/icons02.png) 35px 3px no-repeat;margin-top:15px}
.registe_form{width:100%;float: left;position: relative;margin-left: 30px;margin-top: 20px;}
.registe_form_ul li{list-style:none;margin-bottom: 30px; height:40px;}
.registe_form_ul label{width: 70px;font-size:14px;height:40px;float: left;line-height:40px;color:#a8a8a8;}
.registe_form_ul input{width:75%;height:36px;border:1px solid #e0e0e0;float:left;background-color: #f8f8f8;text-indent: 10px;}
.registe_form_ul li.reg_sub input{background-color: #47aa34;width:100%;height:40px;}
.error_tip{float: left;margin-top: 7px;color: #e62e2e;}

.Allow_checkbox input {width:15px;height:15px;float:left;margin-top:13px;margin-left:30px;}
.Allow_checkbox label {width:200px;float:left;margin-left:10px;}
.error_tip2 {display:none;float: left;margin-top: 7px;color: #e62e2e;}
</style>